<script setup lang="ts" name="person-new">
    //数据 原来是写在data中的 注意此时的数据不是响应式的
    let name = '张三'
    let age = 18
    let tel = 1246549851

    //方法 注意这样修改name 页面是没有变化的.
    function changeName () {
      name = '赵四'
      console.log(name)//name被修改了 但是name不是相应是的
    }
    function changeAge () {
      console.log(age)
      age += 1
    }
    function showTel () {
      alert(tel)
    }
</script>

<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin:  0 15px;
}
</style>